// 聚焦近期热点
import React, { useState } from 'react'
import Title from '../title'
import Nav from '../nav/Nav'
import ImageFallback from '../Fimage/Lieimg'
import '../focusing/focusing.css'


function Newaigc() {
  // 模拟数据，包含内容和对应的小图标
  const items = [
    {
      text: '近期热点',
      images: 'https://js.ibaotu.com/act/24/09/10/66e0144f828e5.jpg',
      defaultImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      list: [
        { images: 'https://js.ibaotu.com/act/24/09/10/66e013f479fcf.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/10/66e014651a9ee.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/10/66e0150327007.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/10/66e013e625247.jpg', href: '' }
      ]
    },
    {
      text: '人像实拍',
      images: 'https://js.ibaotu.com/act/24/09/10/66e01802b583a.jpg',
      defaultImg:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ugx5mJZ0_2gq_iAIh8RvEQHaGc?w=219&h=190&c=7&r=0&o=5&dpr=1.5&pid=1.7',
      list: [
        { images: 'https://js.ibaotu.com/act/24/09/10/66e0188d7bf18.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/10/66e0189c95387.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/10/66e0188766ff3.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/09/10/66e0189498c7d.jpg', href: '' },
      ]

    },
    {
      text: '生物医疗',
      images: 'https://js.ibaotu.com/act/24/06/17/666fb38428c38.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb3935223b.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb38d7e102.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb3a4e71cb.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb3d1389ab.jpg', href: '' }]
    },
    {
      text: '金融科技',
      images: 'https://js.ibaotu.com/act/24/06/17/666fb2c081ee8.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb19235698.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb18d0f29e.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb2afd4198.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb19f73995.jpg', href: '' },
      ]

    },
    {
      text: '能源开发',
      images: 'https://js.ibaotu.com/act/24/06/17/666fb461926c8.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb46bb1c60.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb48210ac3.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb42c8bd94.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb4251f3bd.jpg', href: '' },
      ]
    },
    {
      text: '背景元素',
      images: 'https://js.ibaotu.com/act/24/08/16/66bf2666256cd.jpg',
      list: [
        { images: 'https://js.ibaotu.com/act/24/07/02/66835e2baa9f2.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/07/22/669db96e1f39c.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/07/18/669882613e31e.jpg', href: '' },
        { images: 'https://js.ibaotu.com/act/24/06/17/666fb90755e60.jpg', href: '' },
      ]
    }
  ];

  const [selectedIndex, setSelectedIndex] = useState<number>(0);
//   const handleSelect = (newIndex) => {  
//     setSelectedIndex(newIndex);  
//     console.log(selectedIndex )
// };
  return (
    <div className='focusing_box'>
      {/* nav */}
      <div className='focusing_top'>
        <div className='foc_title'>
          <Title title='新晋潮流-AIGC'  />
        </div>

        <div className='foc_nav'>
          <Nav items={items}
           onSelect={setSelectedIndex} 
           selectedIndex={selectedIndex}
            />
        </div>
      </div>

      {/* tu */}
      <div className='focusing_tu'>
       
        <div className='xiao_tu'>
          {
            items[selectedIndex].list.map((item, index) => {
              return (
                <div key={index}>
                  <ImageFallback src={item.images}  fallbackSrc={items[selectedIndex].defaultImg} alt='加载失败'/>
                </div>
              )
            })
          }

        </div>
        <div className='da_tu'>
          <img src={items[selectedIndex].images}  onError={(e) => { e.target.src = items[selectedIndex].defaultImg}}  alt='加载失败'/>
        </div>
      </div>

    </div>
  )
}

export default Newaigc
